<script setup lang="ts">
import { Api } from '@/api'
import { useRefreshLoad } from '@/hooks/utils'
import { useGlobalStore } from '@/store/global'
import { delHtmlTag } from '@/utils'
import { ElSkeleton, ElSkeletonItem } from 'element-plus'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'

const { t } = useI18n()
const { width } = storeToRefs(useGlobalStore())
const { params, path, query } = useRoute()
const domRef = ref()

const { list, finished } = useRefreshLoad(
  Api.DocumentService.GetDocuments as any,
  {
    categoryId: params.categoryId,
    channelId: params.channelId,
    domRef,
  },
)
</script>

<template>
  <div ref="domRef" class="root m">
    <ElSkeleton :loading="!list.length" animated :count="3">
      <template #template>
        <div class="brd8 mb20 fx gap15 bg-white p20">
          <ElSkeletonItem
            variant="image"
            class="brd8"
            style="width: 280px; height: 180px"
          />
          <div class="fx1">
            <ElSkeletonItem variant="h3" class="mb20 h20 w30%" />
            <ElSkeletonItem variant="h3" class="mb10 h18" />
            <ElSkeletonItem variant="h3" class="mb10 h18" />
            <ElSkeletonItem variant="h3" class="mb10 h18" />
            <ElSkeletonItem variant="h3" class="mb10 h20 w70%" />
          </div>
        </div>
      </template>
      <template #default>
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            class="brd8 mb20 fx pointer gap12 bg-white p20"
            :class="width > 750 ? 'fx' : 'fx-column'"
            @click="$router.push({ path: `${path}/${item.id}`, query })"
          >
            <img
              class="brd8"
              :class="width > 750 ? ' w30%' : 'w100%'"
              :src="item.CoverImage"
              alt=""
            >
            <div>
              <div class="text-ellip-1 fc-black3 my10 text-15 fw600">
                {{ item.Title }}
              </div>
              <div class="text-ellip-3 fc-black9 text-12 lh-normal">
                {{ delHtmlTag(item.Content) }}
              </div>
            </div>
          </li>
          <li class="fc-black9 fx-cc py20">
            {{ finished ? t("base_没有更多内容了") : t("base_正在加载中") }}
          </li>
        </ul>
      </template>
    </ElSkeleton>
  </div>
</template>

<style lang="scss" scoped>
.root {
  ul.m {
    height: 900px;
  }
}
</style>
